<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2085694_70o9iafz61m.css">
    <link rel="stylesheet" href="css/nav.css">
    <link rel="stylesheet" href="css/middle.css">
    <link rel="stylesheet" href="css/all.css">
    <link rel="stylesheet" href="css/content.css">
    <link rel="stylesheet" href="css/select.css">
    <link rel="stylesheet" href="css/page.css">
    <link rel="stylesheet" href="css/need.css">
    <link rel="stylesheet" href="css/bottom.css">
    <style>
        body{
            width:100%;
            height:1620px;
        }
    </style>
</head>
<body>
    <div class="header">

    </div>
    

    <div class="nav">
        <div class="nav-wrap">
            <!--设置地址-->
            <div class="location">
                <span><img src="images/location.png" alt=""></span>
                <a href="#">深圳 <切换></a>
            </div>
            <!--设置用户-->
            <div class="user">
                <span> <img src="images/adm.png" alt=""></span>
                <a href="#">个人中心</a>
            </div>
            <!--设置内容-->
            <div class="contentone">
                <a href="#">首页</a>
                <a href="#">资讯</a>
                <a href="#">测评</a>
                <a href="#">商城</a>
            </div>
        </div>
    </div>


    <div class="middle">

        <span>首页</span>
        <span>></span>
        <span>预防装修污染</span>
        <span>></span>
        <span>材料库</span>
    </div>


    <div class="all">
        <div class="container">
            <div>
               <ul>
                   <li class="category">类别</li>
                   <li>全部</li>
                   <li class="floor">地板</li>
                   <li>涂料</li>
                   <li>墙纸</li>
                   <li>瓷砖</li>
                   <li>粘胶剂</li>
                   <li>油漆</li>
                   <li>家具</li>
                   <li>板材</li>
                   <li>饰品</li>
                   <img src="images/indexSelect.png" alt="">
               </ul>
           </div>
           <div>
               <ul>
                   <li class="type">类型</li>   
                   <li>全部</li>
               </ul>       
           </div>
           <div>
               <ul>
                   <li class="material">材质</li>
                   <li>全部</li>
                   <li class="wood">实木</li>
                   <li>复合</li>
                   <li>强化</li>
                   <li>其他</li>
               </ul>
           </div>
           <div>
               <ul>
                   <li class="brand">品牌</li>
                   <li>全部</li>
                   <li class="shengxaing">圣象</li>
                   <li>大自然</li>
                   <li>生活家</li>
                   <li>北美风情</li>
                   <li>德尔</li>
                   <li>博典</li>
                   <li>船王</li>
               </ul>
           </div> 
        </div>
    </div>

    <div class="search">
        <div class="search-div">
            <div class="search-left">
                <a href="#">发布时间</a>
                <span><img src="images/downicon.png" alt=""></span>
                <a href="#">价格</a>
                <span><img src="images/upicon.png" alt=""></span>
                <a href="#">环保节能</a>
                <span><img src="images/upicon.png" alt=""></span>
            </div>
            <div class="search-input">
                <span><img src="images/search.png" alt=""></span>
                <div class="input-right">
                    <button>搜索</button>
                </div>
            </div>
            <div class="search-right">
                <span><img class="img"src="images/wenhao.png" alt=""></span>
                <a href="#">了解家居医生建材环保评级标准</a>
            </div>
        </div>
    </div>


    <div class="choise">
        <div>
            <img src="images/data_image.png" alt="">
            <div class="first">
                <span>&nbsp&nbsp德尔</span>
                <span>都市系列3001</span><br>
                <span>&nbsp&nbsp木地板</span>
                <span>-</span>
                <span>复合地板</span><br>
                <span>&nbsp&nbsp单价:</span>
                <span>128元/m2</span><br>
                <span class="one">&nbsp&nbsp环保评级：B(可以使用）</span>
            </div>   
        </div>
        <div>
            <img src="images/data_image.png" alt="">
            <div class="second">
                <span>&nbsp&nbsp德尔</span>
                <span>都市系列3001</span><br>
                <span>&nbsp&nbsp木地板</span>
                <span>-</span>
                <span>复合地板</span><br>
                <span>&nbsp&nbsp单价:</span>
                <span>128元/m2</span><br>
                <span class="two">&nbsp&nbsp环保评级：B(可以使用）</span>

            </div>
        </div>
        <div>
            <img src="images/data_image.png" alt="">
            <div class="third">
                <span>&nbsp&nbsp德尔</span>
                <span>都市系列3001</span><br>
                <span>&nbsp&nbsp木地板</span>
                <span>-</span>
                <span>复合地板</span><br>
                <span>&nbsp&nbsp单价:</span>
                <span>128元/m2</span><br>
                <span class="three">&nbsp&nbsp环保评级：B(可以使用）</span>

            </div>
        </div>
        <div>
            <img src="images/data_image.png" alt="">
            <div class="fourth">
                <span>&nbsp&nbsp德尔</span>
                <span>都市系列3001</span><br>
                <span>&nbsp&nbsp木地板</span>
                <span>-</span>
                <span>复合地板</span><br>
                <span>&nbsp&nbsp单价:</span>
                <span>128元/m2</span><br>
                <span class="four">&nbsp&nbsp环保评级：B(可以使用）</span>

            </div>
        </div>
    </div>

    <div class="choice">
        <div>
            <img src="images/data_image.png" alt="">
            <div class="fivth">
                <span>&nbsp&nbsp德尔</span>
                <span>都市系列3001</span><br>
                <span>&nbsp&nbsp木地板</span>
                <span>-</span>
                <span>复合地板</span><br>
                <span>&nbsp&nbsp单价:</span>
                <span>128元/m2</span><br>
                <span class="five">&nbsp&nbsp环保评级：B(可以使用）</span>
            </div>   
        </div>
        <div>
            <img src="images/data_image.png" alt="">
            <div class="sixth">
                <span>&nbsp&nbsp德尔</span>
                <span>都市系列3001</span><br>
                <span>&nbsp&nbsp木地板</span>
                <span>-</span>
                <span>复合地板</span><br>
                <span>&nbsp&nbsp单价:</span>
                <span>128元/m2</span><br>
                <span class="six">&nbsp&nbsp环保评级：B(可以使用）</span>

            </div>
        </div>
        <div>
            <img src="images/data_image.png" alt="">
            <div class="seventh">
                <span>&nbsp&nbsp德尔</span>
                <span>都市系列3001</span><br>
                <span>&nbsp&nbsp木地板</span>
                <span>-</span>
                <span>复合地板</span><br>
                <span>&nbsp&nbsp单价:</span>
                <span>128元/m2</span><br>
                <span class="seven">&nbsp&nbsp环保评级：B(可以使用）</span>

            </div>
        </div>
        <div>
            <img src="images/data_image.png" alt="">
            <div class="eighth">
                <span>&nbsp&nbsp德尔</span>
                <span>都市系列3001</span><br>
                <span>&nbsp&nbsp木地板</span>
                <span>-</span>
                <span>复合地板</span><br>
                <span>&nbsp&nbsp单价:</span>
                <span>128元/m2</span><br>
                <span class="eight">&nbsp&nbsp环保评级：B(可以使用）</span>

            </div>
        </div>
    </div>


    <div class="page">
        <div class="page-content">
            <!--设置上一页-->
            <button class="last-page">上一页</button>
            <!--设置页面跳转-->
            <div class="consequence">
                <a href="#">1</a>
                <a href="#" style="color:orange;text-decoration: underline;">2</a>
                <a href="#">3</a>
                <a href="#">4</a>
                <a href="#">5</a>
            </div>
            <!--设置下一页-->
            <button class="next-page">下一页</button>
            <!--设置显示所要调转的页面数-->
            <div class="turn-page">
                <span>共有10页，去第</span>
                <input type="text">
                <span class="all">页</span>
            </div>
            <!--显示确定按钮-->
            <button class="confirm">确定</button>
    </div>


    <div>
        <div class="need">
            <img class="code" src="images/small_weixin.png" alt="">
            <div class="character">
                <span class="characterone">建材检测  需求反馈</span><br>
                <span>亲爱的用户，我们正在不断的完善和更新建材库</span><br>
                <span>若没有找到您想要的材料信息，请将您想测的建材告诉我们</span>
            </div>
        </div>
    </div>

    <div class="bottom">
        <div class="bottom-top">
            <div class="top-content">
                <img src="images/footerLogo.png" alt="">
                <p style="font-weight:bold">为室内环境健康把好每一关</p>
                <p>家居医生致力于中国人的家居健康问题，通过专业的技术研究</p>
                <p>和测评，倾力协助大众打造绿色、环保的人居生活环境。</p>
            </div>
            <div class="list-one">
                <p>关于我们</p>
                <p>联系我们</p>
                <p>加入我们</p>
            </div>
            <div class="list-two">
                
                <p>版权说明</p>
                <p>用户隐私</p>
                <p>免责申明</p>
            </div>
            <div class="list-three">
                <p>官方微信</p>
                <p>天猫旗舰店</p>
                <p>加入我们</p>
            </div>
            <!--设置logo部分-->
            <div class="icons">
                <img src="images/weixin2.png" alt="">
                <img src="images/tianmao.png" alt="">
                <img src="images/shop.png" alt="">
            </div>
            <div class="underline">
            
            </div>
        </div>
        
        <div class="bottom-bottom">
            <div class="bottom-left">
                <p>深圳建筑科学研究院股份有限公司 家居医生网</p>
            </div>
            <div class="bottom-right">
                 <p>粤ICP备08011321号 @Copyright All Rights Reserved</p>
            </div>
        </div>

</body>
</html>